<template>
    <div class="data-hall-box">
        <!-- 标题 -->
        <div class="server_titleBox">
              <div class="server_title">
                    <span class="line"></span>
                    <span class="main_titles">数据大厅</span>
                    <span class="line"></span>
              </div>
          <p class="under_title">The data of the hall</p>
        </div>
        <!-- 数据表格 -->
        <div class="data-hall-main">
            <a-tabs type="card" @change="TypeChange">
                <a-tab-pane tab="茶叶" key="1" >
                    <a-tabs defaultActiveKey="1" class="wy-back-ff" tabPosition="left">
                      <a-tab-pane tab="龙井" key="1"></a-tab-pane>
                      <a-tab-pane tab="普洱" key="2"></a-tab-pane>
                      <a-tab-pane tab="毛尖" key="3"></a-tab-pane>
                      <a-tab-pane tab="白茶" key="4"></a-tab-pane>
                      <a-tab-pane tab="龙井" key="5"></a-tab-pane>
                      <a-tab-pane tab="普洱" key="6"></a-tab-pane>
                      <a-tab-pane tab="毛尖" key="7"></a-tab-pane>
                      <a-tab-pane tab="白茶" key="8"></a-tab-pane>
                      <a-tab-pane tab="红茶" key="9"></a-tab-pane>
                      <a-tab-pane tab="黑茶" key="10"></a-tab-pane>
                      <a-tab-pane tab="绿茶" key="11"></a-tab-pane>
                    </a-tabs>
                </a-tab-pane>
                <a-tab-pane tab="咖啡" key="2">
                    <a-tabs defaultActiveKey="1" class="wy-back-ff" tabPosition="left">
                      <a-tab-pane tab="咖啡1" key="1"></a-tab-pane>
                      <a-tab-pane tab="咖啡2" key="2"></a-tab-pane>
                    </a-tabs>
                </a-tab-pane>
                <a-tab-pane tab="鲜花" key="3">
                    <a-tabs defaultActiveKey="1" class="wy-back-ff" tabPosition="left">
                      <a-tab-pane tab="鲜花1" key="1"> </a-tab-pane>
                      <a-tab-pane tab="鲜花2" key="2"></a-tab-pane>
                    </a-tabs>
                </a-tab-pane>
                <a-tab-pane tab="粮食" key="4">
                    <a-tabs defaultActiveKey="1" class="wy-back-ff" tabPosition="left">
                      <a-tab-pane tab="粮食1" key="1"></a-tab-pane>
                      <a-tab-pane tab="粮食2" key="2"></a-tab-pane>
                    </a-tabs>
                </a-tab-pane>
                <a-tab-pane tab="生鲜" key="5">
                    <a-tabs defaultActiveKey="1" class="wy-back-ff" tabPosition="left">
                      <a-tab-pane tab="生鲜1" key="1"></a-tab-pane>
                      <a-tab-pane tab="生鲜2" key="2"></a-tab-pane>
                    </a-tabs>
                </a-tab-pane>
            </a-tabs>
            <no-ssr>
                <apexchart ref="seven" height="390" type="bar" class="data-hall-chart" :options="seven.chartOptions" :series="seven.series" />
            </no-ssr>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: 'index-Datahall',
  components: {
  },
  data () {
    return {
      seven: {
        series: [{
          name: 'Net Profit',
          data: [44, 55, 57, 56, 61, 58, 63, 60, 66,34,56,56]
        }],
        chartOptions: {
          plotOptions: {
            bar: {
              horizontal: false,
              columnWidth: '40%',
              endingShape: 'rounded'    
            },
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
          },

          xaxis: {
            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          },
          yaxis: {
            title: {
              text: '$ (thousands)'
            }
          },
          fill: {
            opacity: 1

          },
          tooltip: {
            y: {
              formatter: function (val) {
                return "$ " + val + " thousands"
              }
            }
          }
        }
      }
    }
  },
  computed: {

  },
  methods: {
    TypeChange (key) {

    },
    update(){
      // this.$refs.seven.updateSeries([
      //   {
      //     name: '最高温',
      //     data: this.weather.day_c
      //   },
      //   {
      //     name: '最低温',
      //     data: this.weather.night_c
      //   }
      // ], true)
    }
  },
  mounted () {

  }
}
</script>
<style lang="scss">
.wy-back-ff{
    background: #ffffff;
}
.data-hall-box{
    background: #f6f6f6;
    margin-top:0px;
    padding: 40px 0;
}
.data-hall-main{
    width: 1200px;
    margin: 25px auto 0;
    padding-top:23px;
    height: 510px;
    background: #ffffff;
    position: relative;
    .ant-tabs-bar{
        border-bottom: 0px;
        border-right: 0px;
        margin-bottom: 2px;
    }
    .ant-tabs .ant-tabs-left-bar{
        border-right: 0px;
        margin-right: 0px;
    }
    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        background: #DDDDDD;
        color: #ffffff;
        border-radius: 0;
        border: none;
    }
    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
        background: #15837A;
    }
    .ant-tabs-nav .ant-tabs-tab-active,.ant-tabs-nav .ant-tabs-tab:hover{
        color: #15837A;
    }
    .ant-tabs .ant-tabs-left-bar .ant-tabs-ink-bar{
        left: 0px;
        background: #15837A;
    }
    .ant-tabs .ant-tabs-left-bar .ant-tabs-tab{
        border-bottom: 1px solid #F6F6F6;
        border-right: 1px solid #F6F6F6;
        margin: 0;
        width: 80px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        text-align: center;
        float: left;
    }
    .ant-tabs .ant-tabs-nav .ant-tabs-tab-active{
        color: #15837A;
        border-right: none;
    }
    .ant-tabs .ant-tabs-left-content{
        border-left: none;
    }
    .ant-tabs .ant-tabs-left-bar .ant-tabs-nav-container{
        margin-right: 0px;
    }
    .ant-tabs .ant-tabs-left-bar .ant-tabs-nav{
        width: 81px;
    }
    .data-hall-chart{
        width: 1118px;
        position: absolute;
        top: 100px;
        left: 70px;
    }
}
</style>
